{% extends "base_master.html" %}

{% block include %}
<link rel="stylesheet" href="/resources/css/sheet.css" type="text/css" />

{% endblock %}


{% block script %}
var animateTime = 1000;
            jQuery(document).ready(function(){

                var totalHours = 0;
                $("#tableReportBody > tbody > tr > td > #divTotalHour").each(function(){
                    totalHours += parseInt($(this).text());
                });
				
				//totalHours = 12000;

                //$("#divChargeableHours").text(totalHours).css("display", "none").fadeIn(animateTime);
				//$.delay(1000);
				//setTimeout(function(){for(var i = 0;i < totalHours; i++){$("#divChargeableHours").text(i);} } , 1500);
					
				//alert(totalHours);
				var from = {property: 0};
				var to = {property: parseInt(totalHours)};
				 
				$("#divChargeableHours").animate(to, {
					duration: 1000,
					step: function() {
						$("#divChargeableHours").text("").text(parseInt(this.property));
					}, complete:function(){
						$("#divChargeableHours").text("").text(totalHours);
					}
				});
				
				//$("#divChargeableHours").text(totalHours);
				
				
				
				$("#minusT, #plusT").click(function(){
					console.info($(this).find("span").text());
					document.location.href = "/record/sheet/" + $(this).find("span").text();
					
				});
				
				
            });

                
               



            function goProjectEdit(start, end, projCode, workType){
            	 document.location.href ='record.t_record_1.view?PROJ_CODE='+projCode+'&WORK_TYPE='+workType+"&start="+start+"&end="+end;
            }

            function goCost(start, end, projCode, workType){
                document.location.href = "cost.costSheet.view?PROJ_CODE="+projCode+"&WORK_TYPE="+workType+"&start="+start+"&end="+end;
            }
{% endblock %}

{%block body %}
<form id="form">
            <input type="text" id="start" name="start" value="{{ start }}" />
            <input type="text" id="end" name="end" value="{{ end }}" />
        </form>

        <div id="divReportHead">
            <table border="0" width="100%" id="divReportHead">
                <tbody>
                    <tr>
                        <td colspan="2" width="31%" style="text-align:center">
                            <h1>TIME REPORT</h1>
                        </td>
                        <td width="23%">
                            <table border="0" width="100%"  class="boxTable smallBoxTable">
                                <tr>
                                    <td width="30%">PERSONAL<br/>NUMBER</td>
                                    <td width="70%"><div id="divPersonalNumber" class="singleBox">{{user.userid}}</div></td>
                                </tr></table>
                        </td>
                        <td width="23%">
                            <table border="0" width="100%" class="boxTable smallBoxTable"><tr><td width="30%">SIGNATURE</td><td width="70%">&nbsp;</td></tr></table>
                        </td>
                        <td width="23%">
                            <table border="0" width="100%" class="boxTable smallBoxTable"><tr><td width="30%">APPROVAL</td><td width="70%">&nbsp;</td></tr></table>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div id="period">
                                <table border="1" width="100%" class="boxTable smallBoxTable">
                                    <tr>
                                        <th rowspan="2">
											<button id="minusT" text="@" >
												&lt;&lt;<span style="display:none">{{previous_duration}}</span>
											</button>
											
											<!-- <a id="minusT" href="#" title="현재 조건 기준으로 한 TERM 앞으로" onclick="">&lt;&lt;</a> --></th>
                                        <th rowspan="2">PERIOD<br/>ENDING</th>
                                        <th width="15">M</th>
                                        <th>DAY</th>
                                        <th>YEAR</th>
                                        <th rowspan="2">
											<button id="plusT" value="{{next_duration}}">
												&gt;&gt;<span style="display:none">{{next_duration}}</span>
											</button>
											<!-- <a id="plusT" href="#" title="현재 조건 기준으로 한 TERM 뒤로">&gt;&gt;</a> --></th>
                                    </tr>
                                    <tr><td width="15"><div id="month">{{ end|date:"n"}}</div></td>
                                        <td><div id="day">{{ end|date:"j"}}</div></td>
                                        <td><div id="year">{{ end|date:"Y"}}</div></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                        <td>
                            <table border="0" width="100%" class="boxTable smallBoxTable">
                                <tr><td>CHARGEABLE HOURS</td></tr>
                                <tr><td><div id="divChargeableHours" class="singleBox"></div></td></tr>
                            </table>
                        </td>
                        <td>
                            <table border="0" width="100%" class="boxTable smallBoxTable"><tr><td width="30%">NAME</td><td width="70%" ><div id="divName" class="singleBox">{{user.username}}</div></td></tr></table>
                        </td>
                        <td>
                            <table border="0" width="100%" class="boxTable smallBoxTable"><tr><td width="30%">FUNCTION</td><td width="70%">&nbsp;</td></tr></table>
                        </td>
                        <td>
                            <table border="0" width="100%" class="boxTable smallBoxTable"><tr><td width="30%">PERSONNEL<br/>CLASSIFICATION</td><td width="70%">&nbsp;</td></tr></table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="divReportBody">
            <table border="1" width="100%" id="tableReportBody" class="boxTable">
                <thead>
                    <tr>
                        <th style="width:300px;" rowspan="3">CLIENT NAME AND DESCRIPTION OF WORK</th>
                        <th colspan="{{ diff_days|length }}">TIME DISTRIBUTION FOR PERIOD</th>
                        <th rowspan="3">TOTAL<br/>HOURS</th>
                        <th rowspan="3">EXPENSES</th>
                        <th rowspan="3">PROJECT NO OR<br/>ACTIVITY CODE</th>
                        <th rowspan="3">NOTES</th>
                    </tr>
                    <tr>
{% for date in diff_days %}

  <th>{{date|date:"n.j"}}</th>
{% endfor %}
                       
                                      
                                   
                    </tr>
                    <tr>
                        {% for date in diff_days %}

  <th>{{date|date:"D"}}</th>
{% endfor %}
                    </tr>
                </thead>
                <tbody>

                    
                    <tr>
                        <td>
                            <div id="divProjectName" class="projectName">
                                <input type="hidden" id="selProjCode" value="<%= projCode%>" />
                                <!-- <a id="projectAnchor"><%=projName%></a> -->
                                <a href="javascript:goProjectEdit('<%=start%>', '<%=end%>', '<%=projCode%>', '<%=workType%>');"><%=projName%></a>
                            </div>
                        </td>

                        
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>
<td><div id='divHour'>0</div></td>

                        <td><div id="divTotalHour">150</div></td>
                        <td>
                            <div id="divExpense">
                                <a href="javascript:goCost('<%=start%>', '<%=end%>', '<%=projCode%>', '<%=workType%>');">100</a>
                            </div>
                        </td>
                        <td><div id="divProjectCode"><%=projCode%></div></td>
                        <td>-<input type="hidden" id="worktype" value="<%= workType%>"/></td>
                    </tr>

                </tbody>

            </table>
        </div>
        <div>
            <a href="#" id="projectAdd" name="projectAdd">
                <img alt="프로젝트 등록" title="프로젝트 등록" src="<%=root%>/resources/images/btnRegist.gif">
            </a>
        </div>
{% endblock %}